<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>重定向</title>
</head>
<body>
<div id="app">
    <router-link to="/">Home</router-link>
    <router-link to="/user">User</router-link>
    <router-link to="/login">Login</router-link>
    <router-link to="/about">About</router-link>

    <router-view></router-view>
</div>

<script type="module">
    import {createApp} from "../../../../js/vue.esm-browser.js";
    import {createRouter,createWebHashHistory} from "../../../../js/vue-router.esm-browser.js";

    const Home = {template:"<h1>Home Page</h1>"}
    const About = {template:"<h1>About Page</h1>"}
    const User = {template:"<h1>User Page</h1>"}
    const Login = {template:"<h1>Login Page</h1>"}

    const routes = [
        {
            path:"/",
            component:Home,
        },
        {
            path:"/about",
            component:About,
        },
        {
            path:"/user",
            // 通常在使用的时候，先判断一下用户是否已经登录，如果没有登录，会进行跳转到登录页面。
            // 这里直接进行了重定向操作，/user 直接到 /login
            redirect:"/login",
            component:User,
        },
        {
            path:"/Login",
            component:Login,
        }
    ]

    let router = createRouter(
        {
            history: createWebHashHistory(),
            routes,
        }
    );
    let app = createApp(
        {
            setup(){
                return {}
            }
        }
    )

    app.use(router)
    app.mount("#app")
</script>
</body>
</html>